<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name='viewport' content='width=device-width, initial-scale=0.5, maximum-scale=0.5' />
		<script src="js/jquery-1.9.1-min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin:0;
			}
			section{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.resize{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<section>
			<img class="resize" src="images/nainai.png" id="nainai" style="width: 1280px;height: 960px;" />
		</section>
		
		<script type="text/javascript">
			$(document).on('touchmove',function(e){
				e.preventDefault()
			})
			var w = $(window).width();
			var h = $(window).height();
			var scaleW = w / 640;
			var scaleH = h / 960;
			$('body,html').css({
				width: w,
				height: h
			})
			var resizes = document.querySelectorAll('.resize');
			for(var j = 0; j < resizes.length; j++) {
					resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
					resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
					resizes[j].style.bottom = parseInt(resizes[j].style.bottom) * scaleH + 'px';
					resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
					resizes[j].style.top = parseInt(resizes[j].style.top) * scaleW + 'px';
				}
			otherSwitch('#nainai');
	   	    function otherSwitch(id,dir){
	  		    var i=1 ,c;
	  		    setInterval(function(){
	  		     	if(i==1){
		  		     	c = -i*640*scaleW
		  		     	$(id).css({'left':c})
		  		     	i=0;
	  		     	}else{
	  		     
		  		     	$(id).css({'left':0})
		  		     	i=1
	  		     	}
	  		    },400)
	 	       	
//	   	       }
	   		}
		</script>
	</body>
</html>
